.navbar
  .navbar-inner
    .left.sliding
      a(href="index.html").back.link
        i.icon.icon-back
        span Back
    .center.sliding Media Lists
    .right
      a(href="#").open-panel.link.icon-only
        i.icon.icon-bars
.pages.navbar-through
  .page(data-page="media-lists")
    .page-content
      .content-block
        p Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more complex data, like products, services, userc, etc. You can even use them in 
          a(href="#", data-popover=".popover-music").open-popover popovers
      .content-block-title Songs
      .list-block.media-list
        ul
          li
            a(href="#").item-link.item-content
              .item-media
                img(src="http://lorempixel.com/160/160/people/1", width="80")
              .item-inner
                .item-title-row
                  .item-title Yellow Submarine
                  .item-after $15
                .item-subtitle Beatles
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
          li
            a(href="#").item-link.item-content
              .item-media
                img(src="http://lorempixel.com/160/160/people/2", width="80")
              .item-inner
                .item-title-row
                  .item-title Don't Stop Me Now
                  .item-after $22
                .item-subtitle Queen
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
          li
            a(href="#").item-link.item-content
              .item-media
                img(src="http://lorempixel.com/160/160/people/3", width="80")
              .item-inner
                .item-title-row
                  .item-title Billie Jean
                  .item-after $16
                .item-subtitle Michael Jackson
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
      .content-block-title Mail App (With Swipe to delete and overswipes)
      .list-block.media-list
        ul
          li.swipeout
            .swipeout-content
              a(href="#").item-link.item-content
                .item-inner
                  .item-title-row
                    .item-title Facebook
                    .item-after 17:14
                  .item-subtitle New messages from John Doe
                  .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
            .swipeout-actions-left
              a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
              a(href="#").demo-forward.bg-blue Forward
            .swipeout-actions-right
              a(href="#").demo-actions More
              a(href="#").demo-mark.bg-orange Mark
              a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
          li.swipeout
            .swipeout-content
              a(href="#").item-link.item-content
                .item-inner
                  .item-title-row
                    .item-title John Doe (via Twitter)
                    .item-after 17:11
                  .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
                  .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
            .swipeout-actions-left
              a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
              a(href="#").demo-forward.bg-blue Forward
            .swipeout-actions-right
              a(href="#").demo-actions More
              a(href="#").demo-mark.bg-orange Mark
              a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
          li.swipeout
            .swipeout-content
              a(href="#").item-link.item-content
                .item-inner
                  .item-title-row
                    .item-title Facebook
                    .item-after 16:48
                  .item-subtitle New messages from John Doe
                  .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
            .swipeout-actions-left
              a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
              a(href="#").demo-forward.bg-blue Forward
            .swipeout-actions-right
              a(href="#").demo-actions More
              a(href="#").demo-mark.bg-orange Mark
              a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
          li.swipeout
            .swipeout-content
              a(href="#").item-link.item-content
                .item-inner
                  .item-title-row
                    .item-title John Doe (via Twitter)
                    .item-after 15:32
                  .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
                  .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
            .swipeout-actions-left
              a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
              a(href="#").demo-forward.bg-blue Forward
            .swipeout-actions-right
              a(href="#").demo-actions More
              a(href="#").demo-mark.bg-orange Mark
              a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
      .content-block-title Something more simple
      .list-block.media-list
        ul
          li
            .item-content
              .item-media
                img(src="http://lorempixel.com/88/88/fashion/1", width="44")
              .item-inner
                .item-title-row
                  .item-title Yellow Submarine
                .item-subtitle Beatles
          li
            a(href="#").item-link.item-content
              .item-media
                img(src="http://lorempixel.com/88/88/fashion/2", width="44")
              .item-inner
                .item-title-row
                  .item-title Don't Stop Me Now
                .item-subtitle Queen
          li
            .item-content
              .item-media
                img(src="http://lorempixel.com/88/88/fashion/3", width="44")
              .item-inner
                .item-title-row
                  .item-title Billie Jean
                .item-subtitle Michael Jackson
      .content-block-title Inset
      .list-block.media-list.inset
        ul
          li
            a(href="#").item-link.item-content
              .item-media
                img(src="http://lorempixel.com/88/88/fashion/4", width="44")
              .item-inner
                .item-title-row
                  .item-title Yellow Submarine
                .item-subtitle Beatles
          li
            a(href="#").item-link.item-content
              .item-media
                img(src="http://lorempixel.com/88/88/fashion/5", width="44")
              .item-inner
                .item-title-row
                  .item-title Don't Stop Me Now
                .item-subtitle Queen
          li
            a(href="#").item-link.item-content
              .item-media
                img(src="http://lorempixel.com/88/88/fashion/6", width="44")
              .item-inner
                .item-title-row
                  .item-title Billie Jean
                .item-subtitle Michael Jackson
